<template>
  <div class="bg">
    <div class="login-content shadow">
      <LanguageSwitch />
      <p class="fs16 t-c">系统登录</p>
      <el-form :model="formData" :rules="formRules" ref="formRef" @keyup.enter.native="login">
        <el-form-item prop="username">
          <JYInput v-model.trim="formData.username" :max="10" width="100%" icon="el-icon-user" placeholder="请输入用户名" :autofocus="true" />
        </el-form-item>
        <el-form-item prop="password">
          <JYInput v-model.trim="formData.password" :max="10" width="100%" icon="el-icon-unlock" placeholder="请输入密码" :password="true" />
        </el-form-item>
        <p class="fs08 c-gray">用户名密码随意填写</p>
        <el-form-item>
          <el-button type="primary" @click="loginSubmit">{{$t('button.Login')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import baseMixin from '@/mixin/baseMixin'
import LanguageSwitch from '@/i18n/language-switch.vue'
import JYInput from '@/components/form/jy-input.vue'
import MENU from "@/assets/scripts/menu"
import { login } from '@/api/user.ts'

export default defineComponent({
  components: { LanguageSwitch, JYInput },
  setup() {
    // mixins 混入
    const { Store, Router, ElMessage } = baseMixin()
    
    // 字段声明
    const formRef: any = ref() // 必须同名
    const formData: any = reactive({
      username: '',
      password: ''
    })
    const formRules: any = {
      username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 35, message: '请输入6-35位密码', trigger: 'blur' }
      ]
    }
    
    /**
     * 登录
     */
    const loginSubmit = () => {
      sessionStorage.removeItem('TAGS_LIST')
      formRef.value.validate((valid) => {
        if (valid) {
          sessionStorage.setItem('TOKEN', 'tokenValue')
          Store.commit('SET_USER', {username: formData.username})
          Store.commit('SET_MENU', MENU)
          Router.push('/home')
          /* let params = {
            username: formData.username,
            password: formData.password
          }
          login(params).then(res => {
            if (res.code === 200) {
              sessionStorage.setItem('TOKEN', 'tokenValue')
              Store.commit('SET_MENU', MENU)
              Store.commit('SET_USER', res.result)
              ElMessage.success('登录成功')
              Router.push('/home')
            } else {
              ElMessage.error(res.remark)
            }
          }) */
        } else {
          ElMessage.error('请输入用户名和密码')
        }
      })
    }
    
    return {
      formRef,
      formData,
      formRules,
      loginSubmit
    }
  }
})
</script>

<style scoped lang="less">
.bg {
  width: 100vw;
  height: 100vh;
  background: #2d3a4b;
  > .login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -220px;
    width: 440px;
    height: 360px;
    background: #fff;
    padding: 60px;
    .el-form {
      margin-top: 30px;
      .el-button {
        width: 100%;
        margin-top: 20px;
      }
      :deep(.el-input__icon) {
        font-size: 20px;
      }
    }
  }
}
</style>
